<template>
  <Layout :class="'bg-white p-2'">
    <!-- 第一层  添加按钮以及全局搜索框 -->
    <Row :class="'m-0'">
      <Col span="9">
        <div class="search">
          <Input
            search
            placeholder="按照名字模糊检索"
            v-model="PaymentList.indistinctName"
            :class="'m-2'"
          />
        </div>
      </Col>
      <Col span="2">
        <Button
          class="m-2 w-75"
          type="primary"
          shape="circle"
          @click="searchPaymentList()"
          icon="ios-search"
          >查询</Button
        >
      </Col>
      <Col span="3" push="2">
        <Button class="m-2 w-50" disabled type="success" @click="excelOut()"
          >导出</Button
        >
      </Col>
    </Row>
    <!-- 第二行 -->
    <Row :class="'m-0'">
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="PaymentList.student.name"
          placeholder="姓名"
        />
      </Col>
      <Col span="4">
        <Input
          :class="'w-75 m-2'"
          v-model="PaymentList.student.tel"
          placeholder="电话"
        />
      </Col>
      <Col span="3">
        <Date-picker
          :class="'w-100 m-2'"
          type="datetime"
          v-model="PaymentList.requestDateStart"
          placeholder="申请开始时间"
          transfer
        >
        </Date-picker>
      </Col>
      <div class="to">~</div>
      <Col span="3">
        <Date-picker
          :class="'w-100 m-2'"
          type="datetime"
          v-model="PaymentList.requestDateEnd"
          placeholder="申请结束时间"
          transfer
        >
        </Date-picker>
      </Col>
    </Row>
    <!-- 第三行 -->
    <Row :class="'m-0'">
      <Col span="4">
        <i-col :class="'m-2 w-75 '">
          <Select
            placeholder="请选择服务项目"
            clearable
            v-model="PaymentList.projectService.name"
            @on-change="selectProjectService()"
          >
            <Option v-for="item in projectServiceList" :value="item.name"
              >{{ item.name }}
            </Option>
          </Select>
        </i-col>
      </Col>
      <Col span="4">
        <i-col :class="'m-2 w-75 '">
          <Select
            placeholder="请选择分期方案"
            clearable
            v-model="PaymentList.paymentOptions.name"
            @on-change="selectProjectService()"
          >
            <Option v-for="item in paymentOptionList" :value="item.name"
              >{{ item.name }}
            </Option>
          </Select>
        </i-col>
      </Col>
    </Row>

    <Layout :class="'bg-white'">
      <Table
        disabled-hover
        border
        :class="'m-1'"
        :columns="columnInfo"
        :data="resultBaomingList"
      >
        <!-- 名字超链接 -->
        <template slot-scope="{ row, index }" slot="name">
          <Row>
            <Col>
              <a @click="showPersonDetail(row)">{{ row.name }}</a>
            </Col>
          </Row>
        </template>
        <template slot-scope="{ row, index }" slot="schedule">
          <Row>
            <Col>
              <a @click="showPaymentList(row)">还款计划</a>
            </Col>
          </Row>
        </template>
        <template slot-scope="{ row, index }" slot="contract">
          <Row>
            <Col>
              <a @click="showContractInfo(row)">{{ row.contractName }}</a>
            </Col>
          </Row>
        </template>
        <!-- 下拉菜单 -->
        <template slot-scope="{ row, index }" slot="action">
          <Dropdown class="bottom" transfer disabled-hover trigger="click">
            <Button type="primary">· · ·</Button>
            <DropdownMenu slot="list">
              <DropdownItem>
                <Button type="primary" @click="pass(row)">审核通过</Button>
              </DropdownItem>
              <DropdownItem>
                <Button type="error" @click="noPass(row)">不通过</Button>
              </DropdownItem>
              <DropdownItem>
                <Button type="error" @click="halt(row)">取消申请</Button>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <Page
        class="pages"
        :class="'m-2 text-right'"
        :page-size="PaymentList.size"
        @on-change="pageSearch"
        :total="PaymentList.total"
        :current="PaymentList.page"
        show-sizer
        @on-page-size-change="changeSize"
      />
    </Layout>
  </Layout>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    let self = this
    return {
      visible: false,
      alllist: 'height: 90px;transition:all linear .1s;overflow:hidden',
      apart: 'height: 130px;transition:all linear .1s',
      isShow: true,
      PaymentList: {
        page: 1,
        size: 10,
        total: 0,
        pageSize: '',
        indistinctName: '',
        requestDateStart: '',
        requestDateEnd: '',
        runDateStart: '',
        runDateEnd: '',
        allowDateStart: '',
        allowDateEnd: '',
        projectService: { name: '' },
        paymentOptions: { name: '' },
        payment: { status: '待确认' },
        student: { name: '', tel: '' },
      },
      projectServiceList: [],
      paymentOptionList: [],
      columnInfo: [
        {
          title: '#',
          width: 80,
          fixed: 'left',
          align: 'center',
          render: (h, params) => {
            return h(
              'span',
              params.index +
                (self.PaymentList.page - 1) * self.PaymentList.size +
                1
            )
          },
        },
        {
          title: '学生姓名',
          slot: 'name',
          width: 100,
          fixed: 'left',
        },
        {
          title: '联系电话',
          key: 'tel',
          width: 150,
          fixed: 'left',
        },
        {
          title: '分期金额',
          key: 'projectServiceAmount',
          width: 200,
        },
        {
          title: '付款方案',
          key: 'paymentOptionsName',
          width: 200,
        },
        {
          title: '总服务费',
          key: 'totalService',
          width: 200,
        },
        {
          title: '总计',
          key: 'paymentTotalAmount',
          width: 150,
        },
        {
          title: '课程名称',
          key: 'projectServiceName',
          width: 200,
        },
        {
          title: '进度',
          slot: 'schedule',
          width: 200,
        },
        {
          title: '签约协议',
          slot: 'contract',
          width: 150,
        },
        {
          title: '协议编号',
          key: 'contractId',
          width: 150,
        },
        {
          title: '申请时间',
          key: 'datetime',
          width: 150,
        },
        {
          title: '状态',
          key: 'autor',
          width: 200,
        },
        {
          title: '操作',
          slot: 'action',
          width: 100,
          fixed: 'right',
        },
      ],
      resultBaomingList: [],
      autorUserId: '',
      autorList: [],
      modal2: false,
      nowDate: '',
      currentTime: new Date(),
      isSelectAutor: true,
    }
  },
  methods: {
    showPersonDetail: function(row) {
      console.log(row)
      this.$router.push({
        name: 'student_detail',
        params: {
          row,
        },
      })
    },
    showPaymentList: function(row) {
      console.log(row)
      this.$router.push({
        name: 'paymentItem',
        params: {
          row,
        },
      })
    },
    showContractInfo: function(row) {
      this.$router.push({
        name: 'paymentItem',
        params: {
          row,
        },
      })
    },
    showAll: function() {
      this.isShow = !this.isShow
    },
    showPart: function() {
      this.isShow = !this.isShow
    },
    init: function() {
      this.$data.PaymentList.page = 1
      this.searchPaymentList()
      this.getTime()
      this.selectprojectService()
      this.selectpaymentOptions()
    },
    getTime() {
      const date = new Date()
      const year = date.getFullYear()
      const month =
        date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.nowDate = year + '-' + month + '-' + day
    },

    pass: function(row) {
      let self = this
      console.log(row)
      this.message.confirm({
        title: '系统提示',
        content: '即将通过【' + row.name + '】的申请，确定吗？',

        onOk: () => {
          this.http
            .put({
              url: `/payment/operation/pass/${row.paymentId}`,
            })
            .then((data) => {
              this.message.info('通过申请成功')
              self.searchPaymentList()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    noPass: function(row) {
      let self = this
      console.log(row)
      this.message.confirm({
        title: '系统提示',
        content: '即将拒绝【' + row.name + '】的申请，确定吗？',

        onOk: () => {
          this.http
            .put({
              url: `/payment/operation/noPass/${row.paymentId}`,
            })
            .then((data) => {
              this.message.info('拒绝申请成功')
              self.searchPaymentList()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    halt: function(row) {
      let self = this
      console.log(row)
      this.message.confirm({
        title: '系统提示',
        content: '即将取消【' + row.name + '】的申请，确定吗？',

        onOk: () => {
          this.http
            .put({
              url: `/payment/operation/halt/${row.paymentId}`,
            })
            .then((data) => {
              this.message.info('申请取消成功')
              self.searchPaymentList()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    searchPaymentList: function() {
      this.http
        .get({
          url: '/payment/list',
          param: { strPaymrntPOJO: this.PaymentList },
        })
        .then((data) => {
          console.log(data)
          this.$data.PaymentList.page = data.pageInfo.page
          this.$data.PaymentList.size = data.pageInfo.size
          this.$data.PaymentList.total = data.pageInfo.total
          this.$data.PaymentList.totalPage = data.pageInfo.totalPage
          this.$data.resultBaomingList = parseDataObj(data)
        })
    },
    pageSearch: function(changedPage) {
      this.$data.PaymentList.page = changedPage
      this.searchPaymentList()
    },
    changeSize: function(changeSize) {
      this.$data.PaymentList.size = changeSize
      this.searchPaymentList()
    },
    //请求服务项目列表
    selectprojectService: function() {
      this.http
        .get({
          url: '/projectService/list',
        })
        .then((data) => {
          this.$data.projectServiceList = data
        })
    },
    //请求服务付款方式列表
    selectpaymentOptions: function() {
      this.http
        .get({
          url: '/paymentOptions/list',
        })
        .then((data) => {
          this.$data.paymentOptionList = data
        })
    },
  },
  created: function() {
    //从session中取出用户列表
    let userList = JSON.parse(localStorage.getItem('USER_LIST'))
    userList.forEach((user) => {
      let u = {
        value: user.userId,
        label: user.nickName,
      }
      this.autorList.push(u)
    })
    //在session中取出当前用户权限并校验绑定跟进人条件检索的选择框
    let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))
    currentUser.permissions.forEach((twopermission) => {
      twopermission.permissions.forEach((per) => {
        if (per.name == '可分配') {
          this.isSelectAutor = false
        }
      })
    })
    this.init()
    this.selectprojectService()
    this.selectpaymentOptions()
  },
}

/*
      	此函数主要解析返回的data，将复杂的级联对象封装为resultBaomingList所对应的字段的对象
      */
function parseDataObj(data) {
  //从session中取出用户的集合
  let userList = JSON.parse(localStorage.getItem('USER_LIST'))
  // let userList = JSON.parse(store.state.currentUser)
  //定义一个跟进人名字变量
  let autorName = ''
  //定义一个添加人名字变量
  let cuName = ''
  var BaomingArray = []

  data.list.forEach((list) => {
    let autorName = null
    userList.forEach((user) => {
      if (user.userId == list.baoming.autor) {
        autorName = user.nickName
      }
      if (user.userId == list.baoming.cu) {
        cuName = user.nickName
      }
    })
    let poko = {
      name: list.student.name,
      tel: list.student.tel,
      autor: list.payment.status,
      datetime: list.payment.requestDate,
      projectServiceName: list.projectService.name,
      projectServiceAmount: list.projectService.amount,
      paymentOptionsName: list.paymentOptions.name,
      paymentDiscount: list.payment.discount,
      paymentTotalAmount: list.payment.totalAmount,
      contractName: list.contract.name,
      contractId: list.contract.id,
      contractSign: list.contract.sign,
      totalService:
        Number(list.payment.totalAmount) - Number(list.projectService.amount),
      baomingId: list.baoming.id,
      studentId: list.student.id,
      paymentId: list.payment.id,
      studentId: list.student.id,
      contractId: list.contract.id,
    }
    BaomingArray.push(poko)
  })
  return BaomingArray
}
</script>

<style scoped>
.to {
  padding: 10px 10px 0px 30px;
}

.search {
  margin-right: 5px;
}
.hidden {
  position: relative;
  top: 2px;
  cursor: pointer;
  color: gray;
  font-size: 12px;
  padding: 0px 0px 0px 1050px;
}

.bottom {
  text-align: center;
  z-index: 0;
}
.ivu-select-dropdown button {
  display: block;
  margin: 5px 10px;
  width: 120px;
}
.ivu-select-dropdown .ivu-dropdown-item {
  padding: 0;
}
.ivu-table .demo-table-row2 td {
  background-color: white;
}
</style>
<style>
.ivu-select-dropdown {
  max-height: 325px;
}
.ivu-table .demo-table-row td {
  background-color: #f1939c;
  color: #ffffff;
}
</style>
